import * as React from 'react';
import {observer} from 'mobx-react';
import {Modal, Row, Col, Form, Input, Select} from 'antd';
import {PlatFormBaseFormStore} from '../PlatFormStore';
import {SelectItem} from '../../../../component/select/Select';
import {InputItem} from '../../../../component/input/Input';
import _ from 'lodash';

const FormItem = Form.Item;
const Option = Select.Option;

@observer
export class PlatFormBaseFormModal extends React.Component<{store: PlatFormBaseFormStore, title: string, onOk},any> {

    render() {
        return (
            <Modal
                maskClosable={false}
                title={this.props.title}
                onOk={this.ok(this)}
                onCancel={()=>{this.props.store.hide()}}
                width="650"
                visible={this.props.store.visible}>
                <PlatFormBaseForm store={this.props.store}/>
            </Modal>
        )
    }

    ok(me) {
        return function () {
            me.props.onOk(me);
        }
    }

    cancel(me) {
        return function () {
            me.props.onCancel(me);
        }
    }
}

@observer
export class PlatFormBaseForm extends React.Component<{store: PlatFormBaseFormStore},any> {
    onChangeBu(me){
        return function(value){
            let store: PlatFormBaseFormStore = me.props.store;
            store.valid('buId',value,!store.fields.buId.required);
            store.selectBu();
        }
    }
    onChangeApp(me){
        return function(value){
            let store: PlatFormBaseFormStore = me.props.store;
            store.valid('appId',value,!store.fields.appId.required);
            store.selectApp();
        }
    }
    render() {
        const store = this.props.store;

        const colStyle = {
            labelCol: { span: 4},
            wrapperCol: {span: 20}
        }
                
        return (
            <div>
                <Row type="flex">
                    <Col span={24}>
                        <SelectItem mykey="buId" 
                            title="业务方"
                            store={store} 
                            onChange={this.onChangeBu(this)}
                            labelCol= {colStyle.labelCol}
                            wrapperCol= {colStyle.wrapperCol}/> 
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <SelectItem mykey="appId" 
                            title="应用名称"
                            store={store} 
                            onChange={this.onChangeApp(this)}
                            labelCol= {colStyle.labelCol}
                            wrapperCol= {colStyle.wrapperCol}/> 
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem store={store} 
                            myKey="title" 
                            title="标题:"
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem store={store} 
                            myKey="name" 
                            title="名称(接口调用):" 
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <InputItem store={store} 
                            myKey="description" 
                            title="描述:"
                            labelCol= {colStyle.labelCol} 
                            wrapperCol= {colStyle.wrapperCol}/>
                    </Col>
                </Row>
            </div>
        )
    }
}